<template>
  <div class="login">
    <van-nav-bar title="登录" left-arrow @click-left="onClickLeft" fixed/>
    <div class="main">
      <div class="row row1">
        <img src="../assets/images/phone.png" alt>
        <input type="number" placeholder="输入手机号码" v-model="phone">
      </div>
      <div class="row row2">
        <img src="../assets/images/password.png" alt>
        <input type="number" placeholder="输入验证码" v-model="code">
        <span @click="getPhoneCode">{{codeText}}</span>
      </div>
      <div class="row3" @click="login">
        <img src="../assets/images/confirm.png" alt>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      phone: "",
      code: "",
      codeText: "获取验证码",
      codeTime: 0
    };
  },
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    //验证码倒计时
    codeCountdown() {
      this.codeTime = 60;
      let time = setInterval(() => {
        if (this.codeTime <= 0) {
          this.codeText = "获取验证码";
          clearInterval(time);
        } else {
          this.codeTime--;
          this.codeText = this.codeTime + "s";
        }
      }, 1000);
    },

    //获取手机验证码
    async getPhoneCode() {
      if (this.codeTime > 0) {
        return false;
      }
      if (!this.phone) {
        this.$message({
          message: "手机号码不能为空",
          type: "error"
        });
        return false;
      }
      this.codeCountdown();
      let params = {
        mobile: this.phone,
      };
      const res = await this.$axios.post(this.$api.sendSms, params);
    },
    //登录
    async login() {
      let params = {
        mobile: this.phone,
        captcha: this.code
      };
      const res = await this.$axios.post(this.$api.codeLogin, params);
      if (res.code == 1) {
        this.$cookies.set("userInfo", JSON.stringify(res.data));
        this.$cookies.set("token", res.data.token);
        if (this.$route.query.returnUrl) {
          window.location.href = this.$route.query.returnUrl;
        } else {
          this.$router.push({ path: "/", query: {} });
        }
      } else {
        this.$message({
          message: "登录失败：" + res.msg,
          type: "error"
        });
      }
    }
  }
};
</script>
<style scoped>
.login {
  height: 100vh;
  background: #fff;
}
.main {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main .row {
  width: 2.6rem;
  height: 0.45rem;
  background: #e9e9e9;
  border-radius: 50px;
  display: flex;
  align-items: center;
  padding-left: 0.22rem;
}
.main .row1 {
  margin-bottom: 0.3rem;
}
.main .row img {
  width: 0.12rem;
}
.main .row input {
  height: 0.4rem;
  padding-left: 0.14rem;
  border: none;
}
.main .row1 input {
  width: 2rem;
}
.main .row2 input {
  width: 1.2rem;
}
.main .row2 span {
  width: 0.96rem;
  height: 0.33rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00c6d8;
  font-size: 0.12rem;
  color: #fff;
  border-radius: 50px;
}
.row3 {
  margin-top: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.row3 img {
  width: 0.38rem;
}
</style>


